import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Tabbar } from "react-vant";
import { RouterRowState } from "../../types";

interface PropsType {
  routes: RouterRowState[];
}

export const Footer: React.FC<PropsType> = ({ routes }) => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <div>
      <Tabbar
        value={pathname}
        onChange={(name) => navigate(name as string)}
        placeholder
      >
        {routes.map((v, i) => {
          return (
            <Tabbar.Item name={v.path} key={i} icon={v.icon}>
              {v.title}
            </Tabbar.Item>
          );
        })}
      </Tabbar>
    </div>
  );
};
